<div class="container-fluid">
    <app-page-title title="users" [breadcrumbItems]="breadCrumbItems"></app-page-title>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="mb-5">Update Users</h4>
                    <form class="needs-validation" (ngSubmit)="validSubmit()" [formGroup]="validationform">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                              <label for="validationCustom01">First name</label>
                              <input type="text" class="form-control" id="validationCustom01" formControlName="firstName"
                                placeholder="First Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'First Name'"
                                [ngClass]="{'is-invalid': submit && form.firstName.errors}">
                              <div *ngIf="submit && form.firstName.errors" class="invalid-feedback">
                                <span *ngIf="form.firstName.errors.required">Required!</span>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group">
                              <label for="validationCustom02">Last name</label>
                              <input type="text" class="form-control" id="validationCustom02" formControlName="lastName"
                                placeholder="Last Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last Name'"
                                [ngClass]="{'is-invalid': submit && form.lastName.errors}">
                              <div *ngIf="submit && form.lastName.errors" class="invalid-feedback">
                                <span *ngIf="form.lastName.errors.required">Required!</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <label>E-Mail</label>
                          <div>
                            <input type="email" class="form-control" formControlName="email"
                              [ngClass]="{'is-invalid': submit && form.email.errors}" placeholder="Enter a valid email"
                              onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter a valid email id'"/>
                            <div *ngIf="submit && form.email.errors" class="invalid-feedback">
                              <span *ngIf="form.email.errors.required">This value is required.</span>
                              <span *ngIf="form.email.errors.pattern">This value should be a valid email.</span>
                            </div>
                          </div>
                        </div>
                        <div class="form-group mb-4">
                          <label for="status-input">Status</label>
                          <select class="custom-select" id="status-input">
                            <option value="">--Select--</option>
                            <option value="1">Activate</option>
                            <option value="2">Deactivate</option>
                          </select>
                        </div>
                        <button class="btn btn-primary" type="submit">Submit</button>
                      </form>
                </div>
            </div>
        </div>
    </div>
</div>